<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-23 13:25:03
 * @LastEditors: 刘引
 * @LastEditTime: 2021-12-23 17:21:49
-->
<template>
  <div class="root">
    <div class="block">
      <el-carousel height="500px">
        <el-carousel-item v-for="item in 2" :key="item"></el-carousel-item>
      </el-carousel>
    </div>
    <div class="wrapper">
      <div class="title-switch">
        <ul>
          <span v-for="(item,index) in tabItems" :key="item.id" @click="changeTab(item.id, index)">
            <li ref="titleDom" :class="{ active: isActive == index }">{{ item.title }}</li>
          </span>
        </ul>
      </div>
      <div class="content">
        <div v-show="tabId == 0">
          <div class="upload-excel">
            <span>
              <svg
                t="1640247293760"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3719"
                width="40"
                height="40"
              >
                <path
                  d="M625.664 132.608v67.072h309.76v43.008h-309.76v69.632h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.096h309.76v43.008h-309.76v89.088H1024v-757.76H625.664zM0 914.944L577.024 1024V0L0 109.056"
                  p-id="3720"
                  fill="#4ea163"
                />
                <path
                  d="M229.376 660.48h-89.6l118.272-187.904-112.64-180.736h92.16l65.536 119.808 67.584-119.808h89.088l-112.64 177.664L466.944 660.48h-93.696l-70.144-125.44-73.728 125.44z"
                  p-id="3721"
                  fill="#ffffff"
                  data-spm-anchor-id="a313x.7781069.0.i3"
                  class="selected"
                />
              </svg>
            </span>
            <span>拖拽BOM文件至此或点击上传BOM文件</span>
          </div>
          <div class="number">
            <span>生产数量&nbsp;&nbsp;</span>
            <span>
              <input type="number" placeholder="数量" />
            </span>
            <span>PCS</span>
          </div>
          <div class="btn">
            <el-button type="primary" color="#ea5404" size="medium">在线计价</el-button>
          </div>
        </div>

        <!-- <div v-show="tabId == 1">
          <div class="left">
            <div class="number">
              <span>板子尺寸：</span>
              <span>
                <input type="number" placeholder="数量" />
              </span>
              <span>CM</span>
            </div>
          </div>
          <div class="right">
            <div class="number">
              <span>板子数量：</span>
              <span>
                <input type="number" placeholder="数量" />
              </span>
              <span>CM</span>
            </div>
          </div>
        </div>-->
        <div v-show="tabId == 1">
          <div class="img">
            <img src="../../../assets/img/home/upload.png" alt />
          </div>
          <div class="introduce">
            <p>点击上传BOM表/图片，或拖拽到这里</p>
            <p>3秒一键智能报价</p>
            <p>支持xls、xlsx、csv、pdf、png、jpg、bmp格式，文件不超过5M</p>
          </div>
          <div class="btn">
            <el-button type="primary" color="#ea5404" size="medium">BOM文件上传计价</el-button>
          </div>
        </div>
        <!-- <div v-show="tabId == 3">4</div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      tabId: 0,
      isActive: 0,
      tabItems: [
        { id: 0, title: 'SMT计价' },
        // { id: 1, title: 'PCB计价' },
        { id: 1, title: 'BOM计价' },
        // { id: 2, title: 'PCBA快速询价' }
      ],
    }
  },
  methods: {
    changeTab(id: number, index: number) {
      this.tabId = id;
      this.isActive = index;
    }
  }

}
</script>

<style scoped lang="scss">
.root {
  position: relative;
}
.el-carousel__item {
  background-size: 100% 500px;
  background-repeat: no-repeat;
}
.el-carousel__item:nth-child(2n + 1) {
  background-image: url("../../../assets/img/home/banner01.jpeg");
}

.el-carousel__item:nth-child(2n) {
  background-image: url("../../../assets/img/home/banner02.jpeg");
}
.wrapper {
  width: 460px;
  height: 340px;
  position: absolute;
  top: 70px;
  left: 120px;
  background-color: #fff;
  .title-switch {
    background-color: #eeeeee;
    ul {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        flex: 1;
        text-align: center;
        line-height: 50px;
        height: 50px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .content {
    padding: 25px;
    .upload-excel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background-color: #fdf2ef;
      border: 1px dashed #da5d28;
      width: 410px;
      height: 110px;
      cursor: pointer;
      color: #333333;
    }
    .number {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #333333;
      padding-top: 15px;
      padding-bottom: 15px;
      span {
        input {
          color: #606266;
          box-sizing: border-box;
          padding: 15px;
          width: 270px;
          height: 45px;
          border-radius: 0;
          border: 1px solid #c4c4c4;
          outline: none;
          font-size: 16px;
        }
        &:nth-child(3) {
          box-sizing: border-box;
          width: 70px;
          height: 45px;
          text-align: center;
          font-size: 16px;
          line-height: 45px;
          border: 1px solid #c4c4c4;
          border-left: 0;
          background-color: #efefef;
        }
      }
    }
    .btn {
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
      .el-button {
        width: 250px;
        height: 45px;
      }
    }
    .img {
      text-align: center;
      img {
        width: 96px;
        height: 96px;
      }
    }
    .introduce {
      text-align: center;
      p {
        padding-top: 5px;
        padding-bottom: 5px;
        color: #333333;
        &:nth-child(1) {
          font-size: 16px;
        }
        &:nth-child(2) {
          font-size: 14px;
        }
        &:nth-child(3) {
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }
}
.active {
  background-color: #fff;
}
</style>